<template>
    <div class="box p-4">
        <h5 class="text-lg text-bold mb-4">状态说明</h5>
        <div class="flex">
            <div class="item">
                <div class="status s-nostart">&nbsp;</div><span>未开始</span>
            </div>
            <div class="item">
                <div class="status s-doing">&nbsp;</div><span>进行中</span>
            </div>
            <div class="item">
                <div class="status s-done">&nbsp;</div><span>已完成</span>
            </div>
            <div class="item">
                <div class="status s-commited">&nbsp;</div><span>已批改</span>
            </div>
        </div>
    </div>
</template>
<style scoped>
.item {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 20px;
}

.status {
    margin-right: 10px;
}
</style>